<template>
  <div>
    <!--        面包屑导航-->
    <breadcrumb :navData="navData"></breadcrumb>
    <el-card class="box-card">
      <el-button type="primary" style="float:left" @click="add_dialog = true">添加角色</el-button>
      <!-- 添加 -->
      <el-dialog title="添加角色" :visible.sync="add_dialog">
        <el-form :model="add_form" :rules="rules" ref="add_form">
          <el-form-item label="角色名称" label-width="120px" prop="roleName">
            <el-input v-model="add_form.roleName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="角色描述" label-width="120px" prop="roleDesc">
            <el-input v-model="add_form.roleDesc" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="add_dialog = false">取 消</el-button>
          <el-button type="primary" @click="addform_ok">确 定</el-button>
        </div>
      </el-dialog>

      <el-table :data="tableData" border style="width: 100%">
        <el-table-column width="50" type="expand">
          <!-- 展开行 -->
          <template slot-scope="scope">
            <el-row
              style="display: flex;align-items: center"
              class="borderStyle"
              v-for="item1 in scope.row.children"
              :key="item1.id"
            >
              <!--                            一级权限-->
              <el-col style="text-align: center" :span="6">
                <el-tag
                  closable
                  effect="dark"
                  @close="onDeleteRolesRight(scope.row,item1.id)"
                >{{ item1.authName }}</el-tag>
                <i class="el-icon-caret-right"></i>
              </el-col>
              <!--                            二级和三级权限-->
              <el-col class="leftBorder" :span="18">
                <el-row class="topBorder" v-for="item2 in item1.children" :key="item2.id">
                  <el-col :span="6">
                    <el-tag
                      closable
                      type="success"
                      effect="dark"
                      @close="onDeleteRolesRight(scope.row,item2.id)"
                    >{{ item2.authName }}</el-tag>
                    <i class="el-icon-caret-right"></i>
                  </el-col>
                  <el-col :span="18">
                    <el-tag
                      closable
                      v-for="item3 in item2.children"
                      :key="item3.id"
                      type="warning"
                      effect="dark"
                      @close="onDeleteRolesRight(scope.row,item3.id)"
                    >{{ item3.authName }}</el-tag>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
            <!--                        <pre>{{scope.row}}</pre>-->
            <!--                        渲染角色权限-->
          </template>
        </el-table-column>
        <el-table-column label="#" type="index" width="50"></el-table-column>
        <el-table-column prop="roleName" label="角色名称" width="400"></el-table-column>
        <el-table-column prop="roleDesc" label="角色描述" width="400"></el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <!-- 编辑用户 -->
            <el-button size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)">编辑</el-button>
            <!-- 删除 -->
            <el-button size="mini" type="danger" icon="el-icon-delete" @click="del(scope.row)">删除</el-button>
            <!-- 分配权限 -->
            <el-button
              size="mini"
              type="warning"
              icon="el-icon-s-tools"
              @click="setting(scope.row)"
            >分配权限</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 编辑 -->
      <el-dialog title="修改角色" :visible.sync="edit_dialog">
        <el-form :model="edit_form">
          <el-form-item label="角色名称" label-width="120px">
            <el-input v-model="edit_form.roleName" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="角色描述" label-width="120px">
            <el-input v-model="edit_form.roleDesc" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="edit_dialog = false">取 消</el-button>
          <el-button type="primary" @click="editform_ok">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 分配权限弹出 -->
      <el-dialog title="分配权限" :visible.sync="setting_form">
        <!-- 树形控件 -->
        <el-tree
          ref="treeRef"
          :data="tree_data"
          show-checkbox
          node-key="id"
          default-expand-all
          :default-checked-keys="defchecks"
          :props="defaultProps"
        ></el-tree>
        <div slot="footer" class="dialog-footer">
          <el-button @click="setting_form = false">取 消</el-button>
          <el-button type="primary" @click="settform_ok">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "VueShopsRoles",

  data() {
    return {
      navData: ["权限管理", "角色列表"],
      // 渲染列表
      tableData: [],
      add_dialog: false,
      edit_dialog: false,
      // 添加
      add_form: {
        roleName: "",
        roleDesc: "",
      },
      // 编辑
      edit_form: {
        roleName: "",
        roleDesc: "",
      },
      id: 0,
      // 分配权限
      setting_form: false,
      rules: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        roleDesc: [
          { required: true, message: "请输入角色描述", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
      // 树形默认选中的选项
      defchecks: [],
      // 树状图数据源
      tree_data: [],
      // 树形控件属性
      defaultProps: {
        children: "children",
        label: "authName",
      },
      rolesId: 0,
    };
  },

  mounted() {},
  created() {
    this.getroles_list();
  },
  methods: {
    // 列表数据请求
    async getroles_list() {
      const data = await this.axios.get("/roles", {
        params: this.user_msg,
      });
      console.log(data);
      this.tableData = data.data.data;
    },
    // 添加
    addform_ok() {
      this.$refs.add_form.validate(async (valid) => {
        if (valid) {
          const add_list = await this.axios.post("/roles", this.add_form);
          console.log(add_list.data.meta);
          // status: 201
          if (add_list.data.meta.status == 201) {
            this.$message.success("添加成功");
            this.add_dialog = false;
            this.getroles_list();
          } else {
            this.$message.error("添加失败");
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 编辑用户弹出
    async edit(row) {
      this.edit_dialog = true;
      this.id = row.id;
      this.edit_form.roleName = row.roleName;
      this.edit_form.roleDesc = row.roleDesc;
    },
    // 编辑确定
    async editform_ok() {
      const edits = await this.axios.put(`roles/${this.id}`, {
        roleName: this.edit_form.roleName,
        roleDesc: this.edit_form.roleDesc,
      });
      if (edits.data.meta.status == 200) {
        this.$message.success("修改成功");
        this.edit_dialog = false;
        this.getroles_list();
      } else {
        this.$message.error("修改失败");
      }
    },
    // 删除
    async del(row) {
      const ids = await this.axios.delete(`roles/${row.id}`);
      console.log(ids);
      if (ids.data.meta.status == 200) {
        this.$message.success("删除成功");
        this.getroles_list();
      } else {
        this.$message.error("失败");
      }
    },
    // 分配权限
    async setting(row) {
      console.log(row);
      this.rolesId = row.id;
      this.setting_form = true;
      const sett = await this.axios.get("rights/tree");
      if (sett.data.meta.status == 200) {
        this.$message.success("成功");
        this.tree_data = sett.data.data;
      } else {
        this.$message.error("失败");
      }
      console.log(sett);
    },
    // 权限确定
    async settform_ok() {
      let treeRef = this.$refs.treeRef;
      console.log(treeRef);
      let keys = [...treeRef.getHalfCheckedKeys(), ...treeRef.getCheckedKeys()];
      console.log(keys);
      //把所有被选中的权限id 通过,号分割成字符串
      let rids = keys.join(",");
      let { data: res } = await this.axios.post(
        `roles/${this.rolesId}/rights`,
        {
          rids: rids,
        }
      );
      console.log(res);
      if (res.meta.status == 200) {
        this.$message.success(res.meta.msg);
        this.getroles_list();
        this.setting_form = false;
        //关闭对话框
      } else {
        this.$message.error(res.meta.msg);
      }
    },

    //   删除权限
    //   @param row 行数据 可以取出角色id
    //  @param rightId 权限id

    async onDeleteRolesRight(row, rightId) {
      let roleId = row.id; //角色ID
      let { data: res } = await this.axios.delete(
        `roles/${roleId}/rights/${rightId}`
      );
      console.log(res);
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg);
      this.$message.success(res.meta.msg);
      row.children = res.data;
    },
  },
};
</script>

<style lang="scss" scoped>
</style>